<template>
  <div class="deptForm">
  <el-dialog
    :show-close="false"
    :title="title"
    :visible.sync="visible"
    :before-close="closeModal"
    width="30%">
    <el-form ref="forms" label-width="80px" :model="param" :rules="rules"  size="small">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="param.name" placeholder="请输入部门名称"></el-input>
      </el-form-item>
      <el-form-item label="上级部门" prop="pid">
        <select_tree ref="trees" v-model="param.pid" :tree="deptTree" :list="dept" :selectedTree="selectedTree"
                     placeholder="请选择上级部门" size="small"/>
      </el-form-item>
      <el-form-item label="联系地址">
        <el-input v-model="param.address" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入联系地址"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="param.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入部门简介"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-radio-group v-model="param.state" z>
          <el-radio :label="1"><span>启用</span></el-radio>
          <el-radio :label="0"><span>禁用</span></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" >
    <el-button @click="closeModal" size="small">取 消</el-button>
    <el-button type="primary" v-loading="loading" @click="submitForm" size="small">确 定</el-button>
  </span>
  </el-dialog>
  </div>
</template>

<script>
// eslint-disable-next-line camelcase
import select_tree from '@/views/components/select-tree'
import { deptCreate, deptUpdate } from '@/api/system/dept'
import util from '@/libs/util'
export default {
  components: {
    select_tree
  },
  props: {
    // eslint-disable-next-line vue/require-valid-default-prop
    dept: { type: Array, default: [] },
    // eslint-disable-next-line vue/require-valid-default-prop
    deptTree: { type: Array, default: [] },
    initList: { type: Function }
  },
  data () {
    return {
      visible: false,
      title: '新增',
      treeSelected: {},
      type: '',
      loading: false,
      param: {
        id: '',
        name: '',
        pid: '',
        address: '',
        remark: '',
        state: 0
      },
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        pid: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
        state: [{ required: true, message: '该部门是否启用', trigger: 'change' }]
      }
    }
  },
  created () {
  },
  methods: {
    submitForm () {
      this.$refs.forms.validate((valid) => {
        if (valid) {
          this.loading = true
          this.type === 'add' && this.add()
          this.type === 'edit' && this.edit()
        }
      })
    },
    add () {
      util.request(this, deptCreate, this.param, this.initList, '添加部门成功')
    },
    edit () {
      util.request(this, deptUpdate, this.param, this.initList, '编辑部门成功')
    },
    closeModal () {
      this.visible = false
      this.resetForms()
      this.$refs.forms.resetFields()
    },
    openModal (param) {
      param && this.resetForms(param)
      this.title = param ? '编辑部门' : '添加部门'
      this.type = param ? 'edit' : 'add'
      this.visible = true
    },
    resetForms (param) {
      this.param = {
        id: (param && param.id) || '',
        name: (param && param.name) || '',
        pid: (param && param.pid) || '',
        remark: (param && param.remark) || '',
        address: (param && param.address) || '',
        state: (param && param.state) || 0
      }
    },
    selectedTree (e) {
      this.treeSelected = e
    }
  }
}
</script>

<style scoped>
.deptForm >>> .el-dialog {
  border-radius: 8px;
}
.deptForm >>> .el-input {
  width: 80%;
}
.deptForm >>> .el-textarea__inner {
  width: 80%;
}
.deptForm >>> .el-select{
  width: 80%;
}
.deptForm >>> .el-dialog__body{
  padding: 10px 0 0 20px;
}
.deptForm >>> .el-dialog__footer{
  padding: 0 30px 20px;
}
.deptForm >>> .el-dialog__header{
  padding: 20px 30px 10px;
}

</style>
